import { FC, useState, useEffect } from 'react';
import styles from './style.less';
import classnames from 'classnames';
import ScrollModel from '@/components/ScrollModel';
import LittleTitle from './../components/LittleTitle';
import Image from '@/components/Image';
import Chart from './Chart';
import { useModel } from 'umi';

import nodataIcon from '@/assets/nodata.png';

const list_data: any[] = [
  {
    title: '山东步长制药股份有限公司关于签订技术开发合同补充协议的公告',
    desc: '以下简称“公司”，控股子公司吉林天成制药有限公司（以下简称“吉林天成”）与北京海步医药科技股份有限公司（以下简称“北京海步”）签订《技术开发合同补充协议》以下简称“公以下简称“公司”，控股子公司吉林天成制药有限公司（以下简称“吉林天成”）与北京海步医药科技股份有限公司（以下简称“北京海步”）签订《技术开发合同补充协议》以下简称“公',
    way: '人民网',
    time: '2020年03月17日',
  },
  {
    title: '山东步长制药股份有限公司关于签订技术开发合同补充协议的公告',
    desc: '以下简称“公司”，控股子公司吉林天成制药有限公司（以下简称“吉林天成”）与北京海步医药科技股份有限公司（以下简称“北京海步”）签订《技术开发合同补充协议》以下简称“公以下简称“公司”，控股子公司吉林天成制药有限公司（以下简称“吉林天成”）与北京海步医药科技股份有限公司（以下简称“北京海步”）签订《技术开发合同补充协议》以下简称“公',
    way: '人民网',
    time: '2020年03月17日',
  },
  {
    title: '山东步长制药股份有限公司关于签订技术开发合同补充协议的公告',
    desc: '以下简称“公司”，控股子公司吉林天成制药有限公司（以下简称“吉林天成”）与北京海步医药科技股份有限公司（以下简称“北京海步”）签订《技术开发合同补充协议》以下简称“公以下简称“公司”，控股子公司吉林天成制药有限公司（以下简称“吉林天成”）与北京海步医药科技股份有限公司（以下简称“北京海步”）签订《技术开发合同补充协议》以下简称“公',
    way: '人民网',
    time: '2020年03月17日',
  },
  {
    title: '山东步长制药股份有限公司关于签订技术开发合同补充协议的公告',
    desc: '以下简称“公司”，控股子公司吉林天成制药有限公司（以下简称“吉林天成”）与北京海步医药科技股份有限公司（以下简称“北京海步”）签订《技术开发合同补充协议》以下简称“公以下简称“公司”，控股子公司吉林天成制药有限公司（以下简称“吉林天成”）与北京海步医药科技股份有限公司（以下简称“北京海步”）签订《技术开发合同补充协议》以下简称“公',
    way: '人民网',
    time: '2020年03月17日',
  },
  {
    title: '山东步长制药股份有限公司关于签订技术开发合同补充协议的公告',
    desc: '以下简称“公司”，控股子公司吉林天成制药有限公司（以下简称“吉林天成”）与北京海步医药科技股份有限公司（以下简称“北京海步”）签订《技术开发合同补充协议》以下简称“公以下简称“公司”，控股子公司吉林天成制药有限公司（以下简称“吉林天成”）与北京海步医药科技股份有限公司（以下简称“北京海步”）签订《技术开发合同补充协议》以下简称“公',
    way: '人民网',
    time: '2020年03月17日',
  },
  {
    title: '山东步长制药股份有限公司关于签订技术开发合同补充协议的公告',
    desc: '以下简称“公司”，控股子公司吉林天成制药有限公司（以下简称“吉林天成”）与北京海步医药科技股份有限公司（以下简称“北京海步”）签订《技术开发合同补充协议》以下简称“公以下简称“公司”，控股子公司吉林天成制药有限公司（以下简称“吉林天成”）与北京海步医药科技股份有限公司（以下简称“北京海步”）签订《技术开发合同补充协议》以下简称“公',
    way: '人民网',
    time: '2020年03月17日',
  },
];
interface buttonItem {
  title: string;
  key: number;
}
const buttonList: buttonItem[] = [
  {
    title: '产值预警',
    key: 0,
  },
  {
    title: '营业收入预警',
    key: 1,
  },
  {
    title: '能源消耗预警',
    key: 2,
  },
  {
    title: '利润总额预警',
    key: 3,
  },
  {
    title: '用工人数预警',
    key: 4,
  },
];
const Sentiment: FC = () => {
  const { publicSentiment, getPublicSentiment, getWarningMonthData } =
    useModel('company');

  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const toGetaWaningMonthData = () => {
    const id = window.sessionStorage.getItem('companyId') || '';
    const type = currentIndex + 1;
    getWarningMonthData({
      id,
      type,
    });
  };
  useEffect(() => {
    const id = window.sessionStorage.getItem('companyId') || '';
    getPublicSentiment({ id });
    toGetaWaningMonthData();
  }, []);

  useEffect(() => {
    toGetaWaningMonthData();
  }, [currentIndex]);

  return (
    <div className={styles.container}>
      <div className={classnames(styles.content_one, styles.first)}>
        <LittleTitle title="企业舆情信息" />
        <div className={styles.list_content}>
          {publicSentiment.length > 0 ? (
            <ScrollModel width={847} height={740}>
              {publicSentiment.map((item: any, index: number) => (
                <div className={styles.list_item} key={index}>
                  <p className={styles.item_title}>{item.BT}</p>
                  <p className={styles.item_desc}>{item.NR}</p>
                  <p className={styles.item_info}>
                    <span>来源：{item.LY}</span>
                    <span>发布时间：{item.SJ}</span>
                  </p>
                </div>
              ))}
            </ScrollModel>
          ) : (
            <div className={styles.nodate}>
              <Image src={nodataIcon} />
            </div>
          )}
        </div>
      </div>
      <div className={classnames(styles.content_one, styles.second)}>
        <LittleTitle title="企业预警信息" />
        <div className={styles.second_content}>
          <div className={styles.list_warp}>
            {buttonList.map((item: buttonItem) => (
              <div
                className={classnames(
                  styles.list_item,
                  item.key === currentIndex ? styles.actived : null,
                )}
                key={item.key}
                onClick={() => setCurrentIndex(item.key)}
              >
                <span>{item.title}</span>
              </div>
            ))}
          </div>
          <div className={styles.chart_warp}>
            {currentIndex === 0 && <Chart title="产值趋势图" />}
            {currentIndex === 1 && <Chart title="营业收入趋势图" />}
            {currentIndex === 2 && <Chart title="能源消耗趋势图" />}
            {currentIndex === 3 && <Chart title="利润总额趋势图" />}
            {currentIndex === 4 && <Chart title="用工人数趋势图" />}
          </div>
        </div>
      </div>
    </div>
  );
};
export default Sentiment;
